<template>
  <div>
    <color-item title="主色" :colors="mainColors"></color-item>
    <color-item title="success" :colors="successColors"></color-item>
    <color-item title="danger" :colors="dangerColors"></color-item>
    <color-item title="warning" :colors="warningColors"></color-item>
    <color-item title="info" :colors="infoColors"></color-item>
    <color-item title="字体颜色" :colors="fontColors"></color-item>
    <color-item title="边框颜色" :colors="borderColors"></color-item>
    <color-item title="黑色白色" :colors="wbColors"></color-item>
    <color-item title="背景色" :colors="bgColors"></color-item>
  </div>
</template>

<script>
import ColorItem from "@/pages/color/ColorItem";
export default {
  name: 'Color',
  components: { ColorItem },
  data() {
    return {
      mainColors: ['--color-primary', ...Array.from(new Array(10)).map((_, index) => `--color-primary-light-${index + 1}`)],
      successColors: ['--color-success', '--color-success-light', '--color-success-lighter'],
      dangerColors: ['--color-danger', '--color-danger-light', '--color-danger-lighter'],
      warningColors: ['--color-warning', '--color-warning-light', '--color-warning-lighter'],
      infoColors: ['--color-info', '--color-info-light', '--color-info-lighter'],
      fontColors: ['--color-text-primary', '--color-text-regular', '--color-text-secondary', '--color-text-placeholder'],
      borderColors: ['--border-color-base', '--border-color-light', '--border-color-lighter', '--border-color-extra-light'],
      wbColors: ['--color-white', '--color-black'],
      bgColors: ['--color-bg', '--color-content-bg']
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
